<template>
  <div class="app">
    <button @click="isShow = true">退出按钮</button>
    <!-- 
      注意: 
      1) 此次如果用v-model, 使用value 和 @input 语义不明确
      需求: 
      - 想使用类v-model语法简化代码
      - 又要保持属性和事件的语义明确
      方法:
      - .sync修饰符
        完整写法:
        :属性名="xxx" + @update:属性名="xxx=$event"
        简写:
        :属性名.sync="xxx"
     -->
    <!-- <BaseDialog :value="isShow" @input="isShow = $event"></BaseDialog> -->
    <!-- <BaseDialog v-model="isShow"></BaseDialog> -->

    <!-- 使用.sync语法糖 -->
    <!-- <BaseDialog
      :visible="isShow"
      @update:visible="isShow = $event"
    ></BaseDialog> -->
    <BaseDialog :visible.sync="isShow"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from "./components/BaseDialog.vue";
export default {
  data() {
    return {
      // 控制弹窗的显示和隐藏
      isShow: false,
    };
  },
  methods: {},
  components: {
    BaseDialog,
  },
};
</script>

<style>
</style>